<template>
  <a-row>
    <a-col :span="24">
      <a-descriptions
        :column="2"
        style="padding: 20px; background: #efefef; border-bottom: 1px solid #e8e8e8"
      >
        <a-descriptions-item label="提交人">{{detail.submitName}}</a-descriptions-item>
        <a-descriptions-item label="提交时间">{{detail.submitTime}}</a-descriptions-item>
        <a-descriptions-item label="审核人">{{detail.auditorName}}</a-descriptions-item>
        <a-descriptions-item label="审核时间">{{detail.auditTime}}</a-descriptions-item>
      </a-descriptions>

      <a-descriptions :column="2" style="padding: 25px 25px 0;">
        <a-descriptions-item label="加油批次">{{detail.batchNo}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="2" style="padding: 0 25px;">
        <a-descriptions-item label="车辆">{{detail.truckNumber}}</a-descriptions-item>
        <a-descriptions-item label="司机">{{detail.driverName}}</a-descriptions-item>
        <a-descriptions-item label="加油量(L)">{{detail.oilVolume}}</a-descriptions-item>
        <a-descriptions-item label="交易金额(元)">{{detail.totalAmount}}</a-descriptions-item>
        <a-descriptions-item label="当前里程数(km)">{{detail.mileage}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="1" style="padding: 0 25px 25px;">
        <a-descriptions-item label="交易金额明细">
          <a-table
            size="small"
            :columns="columns"
            :data-source="detail.purchaseList"
            :pagination="false"
            rowKey="purchaseId"
          ></a-table>
        </a-descriptions-item>
        <a-descriptions-item label="加油凭证">
          <viewer :images="voucherPicsArr" :options="{url: 'data-x'}">
            <template v-for="(src,index) in voucherPicsArr">
              <img
                style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-descriptions-item>
      </a-descriptions>
    </a-col>
  </a-row>
</template>

<script>
import { queryTruckOilInAndOutDetail } from '@/api/landCenter'
import 'viewerjs/dist/viewer.css'

export default {
  props: ['inAndOutId'],
  data () {
    return {
      detail: {
        voucherPics: ''
      },
      columns: [{
        title: '采购批次',
        dataIndex: 'batchNo'
      }, {
        title: '单价(元/L)',
        dataIndex: 'price'
      }, {
        title: '油量(L)',
        dataIndex: 'oilVolume'
      }, {
        title: '交易金额(元)',
        dataIndex: 'amount'
      }]
    }
  },
  computed: {
    voucherPicsArr () {
      return this.detail.voucherPics ? this.detail.voucherPics.split(',') : null
    }
  },
  watch: {
    inAndOutId () {
      if (this.inAndOutId) {
        queryTruckOilInAndOutDetail({ inAndOutId: this.inAndOutId }).then(rsp => {
          this.detail = rsp.data
        })
      }
    }
  },
  mounted () {
    if (this.inAndOutId) {
      queryTruckOilInAndOutDetail({ inAndOutId: this.inAndOutId }).then(rsp => {
        this.detail = rsp.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
